@import 'styles/settings';
@import 'styles/typography-extends';


.modal {
  max-width: 600px;
  max-height: 600px;
}

.modalContent {
  padding: 45px 20px 0;
  @media #{$tablet-portrait} {
    padding: 65px 100px;
  }
}

.closeBtn {
  right: 7px;
  top: 7px;
  background-color: transparent;
  border: none;
  @media #{$tablet-portrait} {
    right: 33px;
    top: 33px;
  }
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: $paragraph-margin;
  .title {
    @extend %headline;
    margin: 0 $site-gutter;
  }
  .icon {
    width: 40px;
    height: 40px;
    &.flipped {
      transform: rotateZ(270deg);
    }
  }
}

.content {
  margin-bottom: $paragraph-margin;
  .title {
    @extend %title;
  }
  .body {
    @extend %bodyText;
  }
}
